<template>
  <div id="app">
    <el-container>
      <my-component-header @setDialogFormVisible="setDialogFormVisible" />

      <!-- 登陆与注册 -->
      <el-dialog
        class="dialog"
        title="登录"
        :visible.sync="dialogLoginFormVisible"
      >
        <el-form :rules="loginFormRules" ref="loginFormRef" :model="loginForm">
          <el-form-item
            prop="username"
            label="用户名"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="loginForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            prop="password"
            label="密码"
            :label-width="formLabelWidth"
          >
            <el-input
              type="password"
              v-model="loginForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-link
            @click="toForgetPassword"
            style="margin-right: 10px"
            type="info"
            >忘了密码？</el-link
          >

          <el-button type="success" @click="toRegist">点 我 注 册</el-button>
          <el-button type="danger" @click="dialogLoginFormVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="loginSubmit('loginFormRef')"
            >登 录</el-button
          >
        </div>
      </el-dialog>

      <el-dialog
        class="dialog"
        title="注册"
        :visible.sync="dialogRegistFormVisible"
      >
        <el-page-header @back="goBack"> </el-page-header>

        <el-form
          :rules="registFormRules"
          ref="registFormRef"
          :model="registForm"
        >
          <el-form-item
            prop="username"
            label="用户名"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="registForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            prop="firstpassword"
            label="密码"
            :label-width="formLabelWidth"
          >
            <el-input
              type="password"
              v-model="registForm.firstpassword"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            prop="secondpassword"
            label="再次输入"
            :label-width="formLabelWidth"
          >
            <el-input
              type="password"
              v-model="registForm.secondpassword"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item :label-width="formLabelWidth" prop="email" label="邮箱">
            <el-input v-model="registForm.email" />
          </el-form-item>

          <el-form-item
            :label-width="formLabelWidth"
            prop="verifycode"
            label="验证码"
          >
            <el-input type="text" v-model="registForm.verifycode" />

            <el-button
              :disabled="disabled"
              style="margin-top: 10px"
              @click="verifyEmail"
              :type="verifyBtnType"
            >
              {{ verifyBtnState }}
            </el-button>
            <div v-if="verifyBtnState == '正在发送...'">
              {{ sendCodeCountDown }}秒后可重新发送
            </div>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <!-- <el-button type="danger" @click="dialogRegistFormVisible = false"
            >取 消</el-button
          > -->
          <el-button type="primary" @click="registSubmit('registFormRef')"
            >注 册</el-button
          >
        </div>
      </el-dialog>

      <!-- 忘记密码 -->
      <el-dialog
        class="dialog"
        title="忘记密码"
        :visible.sync="dialogForgetPwdVisible"
      >
        <div style="text-align: center">
          <div style="color: #40485b; font-size: 26px">密码找回</div>
          <div style="line-height: 30px; margin: 10px">
            请通过输入您的邮箱重置你的 电信产品订购入库系统 帐号密码
          </div>

          <div>
            <el-input
              style="width: 300px; margin: 10px"
              placeholder="请输入您的邮箱"
              prefix-icon="el-icon-message"
              v-model="emailForget"
            >
            </el-input>
          </div>

          <div>
            <el-button
              @click.native="sendForgetEmail"
              style="width: 300px; margin: 10px"
              type="danger"
              >重 置 密 码</el-button
            >
          </div>
        </div>
      </el-dialog>

      <el-main style="padding: 0px 100px">
        <div class="nav_menu">
          <!-- 上方的导航栏 -->
          <my-component-navmenu />
          <div class="content">
            <!-- 左方导航栏 -->
            <div class="left">
              <div>
                <el-menu
                  ref="menu"
                  default-active="1-1"
                  class="el-menu-vertical-demo"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                >
                  <el-submenu index="menu.index">
                    <template slot="title">
                      <i class="el-icon-menu"></i>
                      <span>{{ menu.menuname }}</span>
                    </template>
                    <span v-for="(item, index) in menu.submenu" :key="index">
                      <el-menu-item-group>
                        <el-menu-item
                          @click="toTabPanelFromMenu(item.submenuname)"
                          :index="item.index"
                          >{{ item.submenuname }}</el-menu-item
                        >
                      </el-menu-item-group>
                    </span>
                  </el-submenu>
                </el-menu>
              </div>
            </div>

            <div class="right">
              <el-tabs v-model="activeTabName" style="height: 200px">
                <!-- 搜索电信产品信息 -->
                <el-input
                  style="margin-bottom: 5px"
                  placeholder="请 输 入 电 信 产 品 信 息"
                  v-model="searchProductInfo"
                >
                  <!-- 插槽插入下拉框 -->
                  <el-select
                    style="width: 150px"
                    slot="prepend"
                    placeholder="请选择产品类型"
                    v-model="searchProductValue"
                  >
                    <span v-for="item in searchProductMenu" :key="item.id">
                      <el-option
                        :label="item.productName"
                        :value="item.value"
                      ></el-option>
                    </span>
                  </el-select>

                  <el-button
                    @click="searchProduct"
                    slot="append"
                    icon="el-icon-search"
                  ></el-button>
                </el-input>

                <!-- 手机套餐面板 -->
                <el-tab-pane
                  class="phone_panel"
                  name="手机套餐"
                  label="手机套餐"
                >
                  <div style="display: flex; flex-wrap: wrap">
                    <span v-for="(item, index) in phoneList" :key="index">
                      <el-card
                        @click.native="toPhoneDetails(item.phoneid)"
                        class="phone_card"
                        style="height: auto; width: 240px"
                        :shadow="'hover'"
                        :body-style="{ padding: '0px' }"
                      >
                        <img
                          :src="getCharIconSrc('phone', item.phonename)"
                          class="image"
                        />

                        <div style="padding: 14px">
                          <div class="title">{{ item.phonetitle }}</div>
                          <div class="price">
                            <span class="original_price"
                              >￥{{ item.originalprice }}</span
                            >
                            <span class="discount_price"
                              >￥{{ item.discountprice }}</span
                            >
                            <span class="stock_info">{{
                              item.isstocked ? "有货" : "无货"
                            }}</span>
                          </div>
                        </div>
                      </el-card>
                    </span>
                  </div>
                </el-tab-pane>

                <!-- 宽带套餐面板 -->
                <el-tab-pane
                  class="broadband_panel"
                  name="宽带套餐"
                  label="宽带套餐"
                >
                  <div style="display: flex; flex-wrap: wrap">
                    <span v-for="(item, index) in broadBandList" :key="index">
                      <el-card
                        @click.native="toBroadBandDetails(item.broadbandid)"
                        class="broadband_card"
                        style="height: auto; width: 240px"
                        :shadow="'hover'"
                        :body-style="{ padding: '0px' }"
                      >
                        <img
                          :src="getCharIconSrc('broadband', item.broadbandname)"
                          class="image"
                        />
                        <div style="padding: 14px">
                          <div class="title">{{ item.broadbandtitle }}</div>
                          <div class="price">
                            <span class="original_price"
                              >￥ {{ item.originalprice }}
                            </span>
                            <span class="discount_price"
                              >￥ {{ item.discountprice }}</span
                            >
                            <span class="stock_info">{{
                              item.isstocked ? "有货" : "无货"
                            }}</span>
                          </div>
                        </div>
                      </el-card>
                    </span>
                  </div>
                </el-tab-pane>

                <!-- 流量套餐面板 -->
                <el-tab-pane
                  class="traffic_panel"
                  name="流量套餐"
                  label="流量套餐"
                >
                  <div style="display: flex; flex-wrap: wrap">
                    <span v-for="(item, index) in trafficList" :key="index">
                      <el-card
                        @click.native="toTrafficDetails(item.trafficid)"
                        class="traffic_card"
                        style="height: auto; width: 240px"
                        :shadow="'hover'"
                        :body-style="{ padding: '0px' }"
                      >
                        <img
                          :src="getCharIconSrc('traffic', item.trafficname)"
                          class="image"
                        />
                        <div style="padding: 14px">
                          <div class="title">
                            {{ item.traffictitle }}
                          </div>
                          <div class="price">
                            <span class="original_price"
                              >￥ {{ item.originalprice }}
                            </span>
                            <span class="discount_price"
                              >￥ {{ item.discountprice }}</span
                            >
                            <span class="stock_info">{{
                              item.isstocked ? "有货" : "无货"
                            }}</span>
                          </div>
                        </div>
                      </el-card>
                    </span>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </el-main>

      <el-footer>
        <!-- 页脚 -->
        <my-component-footer />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import NavMenu from "../components/NavMenu.vue";
import Footer from "../components/Footer.vue";
import { selectAllPhones, searchPhoneES } from "../api/phone";
import { selectAllBroadband } from "../api/broadband";
import { selectAllTraffic } from "../api/traffic";
import baseMixin from "../mixin/baseMixin";
export default {
  mixins: [baseMixin],
  components: {
    "my-component-header": Header,
    "my-component-navmenu": NavMenu,
    "my-component-footer": Footer,
  },
  data() {
    return {
      searchProductValue: "",
      searchProductInfo: "",
      searchProductMenu: [
        {
          id: 1,
          productName: "手机套餐",
          value: "phone_index",
        },
        {
          id: 2,
          productName: "宽带套餐",
          value: "broadband_index",
        },
        {
          id: 3,
          productName: "流量套餐",
          value: "traffic_index",
        },
      ],
      menu: {
        index: "1",
        menuname: "全部产品",
        submenu: [
          {
            index: "1-1",
            submenuname: "手机套餐",
          },
          {
            index: "1-2",
            submenuname: "宽带套餐",
          },
          {
            index: "1-3",
            submenuname: "流量套餐",
          },
        ],
      },
      phoneList: [],
      broadBandList: [],
      trafficList: [],
      activeTabName: "手机套餐",
    };
  },
  created() {
    // 加载数据
    this.selectAllPhones();
    this.selectAllBroadband();
    this.selectAllTraffic();
  },
  methods: {
    async searchProduct() {
      let productType = this.searchProductValue;
      let content = this.searchProductInfo;
      if (productType === "") {
        this.$message.error("请您先选择搜索类型！");
        return;
      }

      if (content.trim() === "") {
        this.$message.error("请您先输入搜索内容！");
        return;
      }

      // 模糊查询手机套餐
      if (productType === "phone_index") {
        await searchPhoneES(productType, {
          phonetitle: content,
        }).then((res) => {
          this.phoneList = res.data;
        });
      }
    },
    //查询所有的手机产品
    async selectAllPhones() {
      await selectAllPhones()
        .then((res) => {
          this.phoneList = res.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    //查询所有的宽带产品
    async selectAllBroadband() {
      await selectAllBroadband()
        .then((res) => {
          this.broadBandList = res.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    //查询所有的流量产品
    async selectAllTraffic() {
      await selectAllTraffic()
        .then((res) => {
          this.trafficList = res.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 点击对应的手机详情页面 传入手机id值
    toPhoneDetails(id) {
      this.$router.push({
        path: `/phoneIndex/${id}`,
      });
    },
    // 点击对应的宽带详情页面 传入宽带id
    toBroadBandDetails(id) {
      this.$router.push({
        path: `/broadBandIndex/${id}`,
      });
    },
    //点击对应的流量详情页面 传入流量id
    toTrafficDetails(id) {
      this.$router.push({
        path: `/trafficIndex/${id}`,
      });
    },
    //通过左方的导航菜单来改变标签名字
    toTabPanelFromMenu(name) {
      this.activeTabName = name;
    },
  },
};
</script>

<style lang="scss">
div.el-page-header {
  margin-bottom: 20px;
}

@import "../assets/css/global.scss";
</style>
